<template>
  <div class="login-container">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <!-- 头部logo -->
    <div class="logo">
      <img src="https://m.360buyimg.com/babel/jfs/t1/37509/21/2202/3659/5cc06d54Eacd1c2a6/94c2fa0851e1623d.png" alt="LOGO">
    </div>
    
    <!-- 登录表单 -->
    <div class="login-form">
      <el-form :model="loginObj" :rules="loginRules" ref="ruleFormRef">
        <el-form-item class="item_label" prop="uname">
          <el-input 
            placeholder="请输入邮箱/手机号码登录" 
            class="item_input" 
            v-model.lazy.trim="loginObj.uname"
          >
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        
        <el-form-item class="item_label" prop="upwd">
          <el-input 
            placeholder="请输入登录密码" 
            show-password 
            class="item_input" 
            v-model.lazy.trim="loginObj.upwd"
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="isAgreen">
                <el-checkbox v-model="loginObj.isAgreen">已阅读并同意《服务条款》</el-checkbox>
            </el-form-item>
        
        <el-form-item>
          <el-button 
            type="primary" 
            class="login-btn" 
            @click="onLogin(ruleFormRef)"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 底部注册 -->
    <div class="register">
      还没有账号？<el-link type="primary" :underline="false">免费注册</el-link>
    </div>
  </div>
</template>

<script setup>
import {
  User,
  Lock,
} from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
import { inject, reactive, ref } from "vue";
import { md5 } from "js-md5";
import router from "@/router";

const $axios = inject('$axios');
const ruleFormRef = ref('');

let loginObj = reactive({
  uname: '',
  upwd: '',
  isAgreen: false,
})

const RuleAgreen = (rule, value, callback) => {
  if(!value){
    callback(new Error('必须勾选该项！'));
  } else {
    callback();
  }
}

const loginRules = reactive({
  uname: [
    {required: true, message: '必须填写登录账号！', trigger: 'blur'}
  ],
  upwd: [
    {required: true, message: '必须填写登录密码！', trigger: 'blur'}
  ],
  isAgreen: [
    {validator: RuleAgreen, trigger: 'change'}
  ]
})

const onLogin = (formEl) => {
  formEl.validate((val) => {
    if(val) {
      let data = {
        username: loginObj.uname,
        password: md5(loginObj.upwd)
      }
      $axios.post('/login', data).then((res) => {
        if(res.code === '200') {
          router.push('/admin/index');
          localStorage.setItem('user', JSON.stringify(res.data))
        } else {
          ElMessage.error(res.msg);
        }
      }).catch((error) => {
        if(error.response == undefined || error.response.data == undefined) {
          ElMessage.error(error);
        } else {
          ElMessage.error(error.response.data);
        }
      })
    } else {
      ElMessage.error('登录失败，请重新登录！')
      return false;
    }
  })
}
</script>

<style scoped>
.login-container {
  padding: 0 30px;
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.logo {
  padding: 60px 0 40px;
  text-align: center;
}

.logo img {
  width: 120px;
  height: auto;
}

.login-form {
  flex: 1;
}

:deep(.el-form-item) {
  margin-bottom: 25px;
}

:deep(.el-input__wrapper) {
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--el-border-color);
  padding-left: 0;
}

:deep(.el-input__prefix) {
  margin-right: 10px;
  color: #999;
}

:deep(.el-input__inner) {
  padding-left: 5px;
}

.login-btn {
  width: 100%;
  height: 44px;
  font-size: 16px;
  background-color: #e93b3d;
  border: none;
  border-radius: 22px;
}

.login-btn:hover {
  background-color: #d62e30;
}

:deep(.el-button--primary) {
  --el-button-bg-color: #e93b3d;
  --el-button-hover-bg-color: #d62e30;
  --el-button-active-bg-color: #c72528;
}

.register {
  margin-top: auto;
  padding-bottom: 30px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

.register .el-link {
  margin-left: 5px;
  color: #e93b3d;
}

:deep(.el-link--primary) {
  --el-link-text-color: #e93b3d;
  --el-link-hover-text-color: #d62e30;
}
</style>